<template>
    <view class="u-m-p-28 ">
        <view class="tabs-con">
            <u-tabs :list="tabList" @click="tabsChange" lineWidth="80rpx" lineHeight="6rpx" lineColor="#F34B47" :itemStyle="{
                flex: 1,
                height: '88rpx'
            }"></u-tabs>
        </view>
        <view class="main-pd u-m-t-28">
            <view class="u-card">
                <view class="list-item">
                    <view class="u-flex u-flex-between u-flex-items-center">
                        <view class="u-flex u-flex-items-center">
                            <view class="color-595959 font-32">一星级</view>
                            <view><u-rate activeColor="#faad14" size="30" count="1" :value="1" :readonly="true"></u-rate></view>
                        </view>
                        <view class="color-333 font-32">{{ activeIndex==1?fyMsg.dt1star: fyMsg.wdt1star }}元/㎡/月</view>
                    </view>
                </view>
                <view class="list-item">
                    <view class="u-flex u-flex-between u-flex-items-center">
                        <view class="u-flex u-flex-items-center">
                            <view class="color-595959 font-32">二星级</view>
                            <view><u-rate activeColor="#faad14" size="30" count="2" v-model="two" :readonly="true"></u-rate></view>
                        </view>
                        <view class="color-333 font-32">{{ activeIndex == 1 ? fyMsg.dt2star : fyMsg.wdt2star }}元/㎡/月</view>
                    </view>
                </view>
                <view class="list-item">
                    <view class="u-flex u-flex-between u-flex-items-center">
                        <view class="u-flex u-flex-items-center">
                            <view class="color-595959 font-32">三星级</view>
                            <view><u-rate activeColor="#faad14" size="30" count="3" v-model="three" :readonly="true"></u-rate></view>
                        </view>
                        <view class="color-333 font-32">{{ activeIndex == 1 ? fyMsg.dt3star : fyMsg.wdt3star }}元/㎡/月</view>
                    </view>
                </view>
                <view class="list-item">
                    <view class="u-flex u-flex-between u-flex-items-center">
                        <view class="u-flex u-flex-items-center">
                            <view class="color-595959 font-32">四星级</view>
                            <view><u-rate activeColor="#faad14" size="30" count="4" v-model="four" :readonly="true"></u-rate></view>
                        </view>
                        <view class="color-333 font-32">{{ activeIndex == 1 ? fyMsg.dt4star : fyMsg.wdt4star }}元/㎡/月</view>
                    </view>
                </view>
                <view class="list-item">
                    <view class="u-flex u-flex-between u-flex-items-center">
                        <view class="u-flex u-flex-items-center">
                            <view class="color-595959 font-32">五星级</view>
                            <view><u-rate activeColor="#faad14" size="30" count="5" v-model="five" :readonly="true"></u-rate></view>
                        </view>
                        <view class="color-333 font-32">{{ activeIndex == 1 ? fyMsg.dt5star : fyMsg.wdt5star }}元/㎡/月</view>
                    </view>
                </view>
                <view class="list-item">
                    <view class="u-flex u-flex-between u-flex-items-center">
                        <view>
                            <view class="color-595959 font-32">上下浮动</view>
                        </view>
                        <view class="color-333 font-32">{{ activeIndex == 1 ? fyMsg.dtFd : fyMsg.wdtFd }}%</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref } from "vue"
import { getfwfjgApi } from "@/api/index"
import { onLoad } from "@dcloudio/uni-app"
// tabs 列表
const tabList = ref([
    {
        name: "不带电梯住宅"
    },
    {
        name: "带电梯住宅"
    }
])
let activeIndex = ref(0)
let fyMsg = ref({})
let two = ref(2)
let three = ref(3)
let four = ref(4)
let five = ref(5)
const tabsChange = (data)=>{
    activeIndex.value = data.index
}
const getfwfjgHandle = ()=>{
    getfwfjgApi().then(res=>{
        if(res.success){
            fyMsg.value = res.data;
        }
    })
}
onLoad(()=>{
    getfwfjgHandle()
})
</script>
<style lang="scss" scoped>
.tabs-con {
    background-color: #fff;
    height: 88rpx;
}
</style>